<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="/user/form.js"></script>
    <style>
        html{
            height: 100%;
        }
        body{
            background: url('/user/bg.png') no-repeat center/cover;
        }
        .form{
            width: 500px;
            height: 600px;
            margin: 30px auto;
        }
        .form_register,.form_login{
            width: 500px;
            border-radius: 5px;
            box-shadow: 0 0 3px #ccc;
            overflow: hidden;
            transition: height 1s;
        }
        .form_register{
            height: 548px;
        }

        .form form{
            padding: 25px 40px;
        }
        .form .form_item{
            display: flex;
            margin: 25px 0;
            vertical-align: middle;
        }
        .form input{
            outline: none;
            text-indent: 10px;
            flex: 1;
            width: auto;
            border: none;
            border-radius: 3px;
            height: 36px;
        }
        .form form label{
            width: 90px;
            float: left;
            line-height: 36px;
        }
        h1{
            text-align: center;
            padding: 0;;
            margin: 30px 0 30px 0;
        }
        .form form input[type='submit']{
            background-color: #0096888c;
            color: aliceblue;
            height: 45px;
            font-size: 20px;
            cursor:pointer;
            margin-top: 20px;
        }
        .form .info{
            text-align: center;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .form .info span{
            color: crimson;
            margin-left: 3px;
        }
        .form .info span:hover{
            cursor: pointer;
            border-bottom: 1px solid crimson;

        }

        div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.9;}
    </style>
</head>
<body>

<div class="form" style="position:relative">

    <!--注册表单-->
    <div class="form_register" style="height:0;">
        <form action="http://localhost:8080/dao/register">
            <h1>注册表单</h1>
            <div class="form_item">
                <label for="username">用户名：</label>
                <input type="text" name="username" id="username1" placeholder="请输入用户名" required >
            </div>
            <div class="form_item">
                <label for="usertel">邮箱：</label>
                <input type="text" name="usertel" id="usertel" placeholder="请输入用户电话" required>
            </div>
            <div class="form_item">
                <label for="password">密码：</label>
                <input type="password" name="password" id="password1" placeholder="请输入密码名" required>
            </div>
            <div class="form_item">
                <label for="type">身份类别：</label>
                <input type="text" name="usertype" id="type" placeholder="请输入身份类别" required>
            </div>
            <div class="form_item">
                <input type="submit" value="注册">
            </div>
        </form>
        <div class="info">已有账号？点击<span class="switch login_Btn">登录</span></div>
    </div>

    <!--登录表单-->
    <div class="form_login" style="position:absolute">

        <form action="http://localhost:8080/dao/login/local">
            <h1>登录表单</h1>
            <h6 align="center" style="color:red " >${sessionScope.error }</h6>
            <div class="form_item">
                <label for="username">名字：</label>
                <input type="text" name="username" id="username" placeholder="请输入用户名" required  class="text">
            </div>
            <div class="form_item">
                <label for="password">密码：</label>
                <input type="password" name="password" id="password" placeholder="请输入密码名" required>
            </div>
            <div class="form_item">
                <input type="submit" value="登录">
            </div>
            <div style="text-align: center;font-size: 14px;">第三方登陆 <a href="https://cas.dgut.edu.cn?appid=javaee&state="><img src="/user/dgut.jpg" width="18px" height="18px"></a></div>
        </form>
        <div class="info">没有账号？点击<span class="switch register_Btn">注册账号</span></div>
    </div>

</div>
</body>
</html>